<template>
  <el-form ref="ruleFrom" :model="ruleFrom"  label-width="100px">
    <el-page-header content="详情页" @back="goBack" />
    <el-row style="margin-top: 30px">
      <!--基本输入框-->
      <el-col :span="5">
        <el-form-item label="调拨编号" prop="name1">
          {{ruleFrom.allotId}}
        </el-form-item>
      </el-col>
      <!--基本多选框-->
      <el-col :span="8">
        <el-form-item label="审批人" placeholder="" prop="subjectId">
          {{ruleFrom.allotName}}
        </el-form-item>
      </el-col>  <!--基本多选框-->
      <el-col :span="8">
        <el-form-item label="审批时间" placeholder="" prop="subjectId">
          {{ruleFrom.allotNowtime}}
        </el-form-item>
      </el-col>
      <!--基本单选框-->
      <el-col :span="5">
        <el-form-item label="申请人：" prop="name2">
          {{ruleFrom.pharmacyName}}
        </el-form-item>
      </el-col>
      <!--基本多选框-->
      <el-col :span="8">
        <el-form-item label="创建日期" placeholder="" prop="subjectId">
          {{ruleFrom.allotTime}}
        </el-form-item>
      </el-col>
    </el-row>
    <!--上传文件-->

    <!--数据表格-->
    <el-row>
      <el-col :span="24">
        <el-form-item>
          <el-table
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              border stripe style="width: 100%;margin-top: 10px"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
          >



            <el-table-column label="药品名" prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugId"/>

            <el-table-column label="药品名" prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugName"/>

            <el-table-column label="剂型" prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugJixin"/>

            <el-table-column label="规格" prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugGuige"/>

            <el-table-column label="类型"
                             prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugState">
              <template #default="scope">
                <template v-if="scope.row.allotEntity.pharmacyEntity.lyhDrugEntity.drugState =='1'">
                  中药
                </template>

                <template v-if="scope.row.allotEntity.pharmacyEntity.lyhDrugEntity.drugState =='2'">
                  西药
                </template>
              </template>
            </el-table-column>

            <el-table-column label="价格" prop="allotEntity.pharmacyEntity.lyhDrugEntity.drugPrice"/>

            <el-table-column label="生产厂商" prop="allotEntity.pharmacyEntity.lyhDrugEntity.lyhSupplierEntity.supplierName"/>
            <el-table-column prop="allotdetailsDate" label="申请时间"/>

            <el-table-column label="申请调拨数量" prop="numbers"/>

            <el-table-column prop="allotId" label="调拨编号" width="120"/>
          </el-table>

          <!--分页-->
          <div class="fy_div" style="margin-left: 400px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        </el-form-item>
      </el-col>
    </el-row>

  </el-form>
  <div id="xl">





  </div>


</template>
<script>
import http, {service} from "@/http/request";

export default {
  name: "drugInfosC",
  data(){
    return{
      tableData:[],
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据

      ruleFrom:{
        allotId:''
      },
      drugInfosC:[],
    }
  },
  methods:{


    goBack(){
      this.$router.push({
        path: '/diaobo'
      })
    },




    initData(allotId){
      service.get("find-allotDetails",{params:{
          allotId:allotId
        }})
          .then((v) => {
            this.tableData = v.data;
          })
    },



    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
  },
  created() {
    this.initData(this.$route.query.key)
      this.ruleFrom=JSON.parse(this.$route.query.value);

  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

.el-card{
  margin-top: 50px;

}
.block{
  margin-left: 350px;
}
.fy_div{
  margin-top:20px;
  margin-left: -200px;
}

.T1{
  list-style-type: none;
}
</style>
